<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="container" id="app">
      <div class="mask" v-if="isShowAdd || isShowCheck || isShowModify"></div>
      <div class="top">
        <div class="t_division"></div>
        <h3>学生信息管理系统</h3>
        <div class="t_division"></div>
      </div>
      <div class="center">
        <div class="c_btn">
          <button class="add_btn btn" @click="handleAdd()">新增</button>
          <button class="del_btn btn" @click="handleDel()">删除</button>
        </div>
        <div class="c_form">
          <table>
            <thead>
              <tr>
                <th style="padding-left: 10px">
                  <input
                    type="checkbox"
                    @change="handleSelectAll()"
                    v-model="isSelectAll"
                  />
                </th>
                <th>序号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>学院</th>
                <th>专业</th>
                <th>年级</th>
                <th>班级</th>
                <th>年龄</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item,index) in currentShowList"
                :key="item.id"
                :class="{odd_ac:(index+1)%2===1, even_ac:(index+1)%2===0}"
              >
                <td style="padding-left: 10px">
                  <input type="checkbox" v-model="item.isCheck" />
                </td>
                <td>{{ index + 1 }}</td>
                <td>{{ item.stuId }}</td>
                <td>{{ item.uName }}</td>
                <td>{{ item.academy }}</td>
                <td>{{ item.major }}</td>
                <td>{{ item.grade }}</td>
                <td>{{ item.stuClass }}</td>
                <td>{{ item.age }}</td>
                <td>
                  <span class="check_btn" @click="handleCheck(item.id)"
                    >查看</span
                  >
                  <span class="modify_btn" @click="handleModify(item.id)"
                    >修改</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="footer">
        <div class="page_info">
          <span
            >第{{currentPage+1}}页,共{{stuList.length}}条,(每页显示10条)</span
          >
        </div>
        <div class="footer_btn">
          <button class="prev_btn btn" @click="handlePrev()">上一页</button>
          <button class="next_btn btn" @click="handleNext()">下一页</button>
        </div>
      </div>
      <div class="popup_window" v-if="isShowAdd || isShowCheck || isShowModify">
        <div class="pw_top">
          <h3>{{currentPopTitle}}</h3>
        </div>
        <div class="pw_center">
          <div class="pw_c_container">
            <div class="pw_c_c_item">
              <div class="inp_item">
                <span>学号</span
                ><input
                  type="text"
                  :disabled="isShowCheck"
                  v-model="editInfoList[0].info"
                  @input="validateStuId()"
                />
              </div>
              <div class="error_node" v-if="editInfoList[0].isError">
                学号格式错误
              </div>
              <div v-else style="min-height: 14px"></div>
            </div>
            <div class="pw_c_c_item">
              <div class="inp_item">
                <span>姓名</span
                ><input
                  type="text"
                  :disabled="isShowCheck"
                  v-model="editInfoList[1].info"
                  @input="validateUName()"
                />
              </div>
              <div class="error_node" v-if="editInfoList[1].isError">
                姓名格式错误
              </div>
              <div v-else style="min-height: 14px"></div>
            </div>
            <div class="pw_c_c_item">
              <div class="inp_item">
                <span>学院</span
                ><select
                  :disabled="isShowCheck"
                  v-model="editInfoList[2].info"
                  @change="validateAcademy()"
                >
                  <option v-for="(item) in collegeInfo" :value="item.id">
                    {{item.collegeName}}
                  </option>
                </select>
              </div>
              <div class="error_node" v-if="editInfoList[2].isError">
                学院格式错误
              </div>
              <div v-else style="min-height: 14px"></div>
            </div>
            <div class="pw_c_c_item">
              <div class="inp_item">
                <span>专业</span
                ><select
                  :disabled="isShowCheck"
                  v-model="editInfoList[3].info"
                  @change="validateMajor()"
                  @click="handleMajorClick()"
                >
                  <option :value="item.id" v-for="(item) in majorList">
                    {{item.majorName}}
                  </option>
                </select>
              </div>
              <div class="error_node" v-if="editInfoList[3].isError">
                专业格式错误
              </div>
              <div v-else style="min-height: 14px"></div>
            </div>
            <div class="pw_c_c_item">
              <div class="inp_item">
                <span>年级</span
                ><select
                  :disabled="isShowCheck"
                  v-model="editInfoList[4].info"
                  @change="validateGrade()"
                >
                  <option
                    :value="item.id"
                    v-for="(item) in gradeList"
                    :key="item.id"
                  >
                    {{item.val}}
                  </option>
                </select>
              </div>
              <div class="error_node" v-if="editInfoList[4].isError">
                年级格式错误
              </div>
              <div v-else style="min-height: 14px"></div>
            </div>
            <div class="pw_c_c_item">
              <div class="inp_item">
                <span>班级</span
                ><select
                  :disabled="isShowCheck"
                  v-model="editInfoList[5].info"
                  @change="validateClass()"
                  @click="handleClassClick()"
                >
                  <option :value="item.id" v-for="(item) in classList">
                    {{item.classCode}}
                  </option>
                </select>
              </div>
              <div class="error_node" v-if="editInfoList[5].isError">
                班级格式错误
              </div>
              <div v-else style="min-height: 14px"></div>
            </div>
            <div class="pw_c_c_item">
              <div class="inp_item">
                <span>年龄</span
                ><input
                  type="text"
                  :disabled="isShowCheck"
                  v-model="editInfoList[6].info"
                  @input="validateAge()"
                />
              </div>
              <div class="error_node" v-if="editInfoList[6].isError">
                年龄格式错误
              </div>
              <div v-else style="min-height: 14px"></div>
            </div>
          </div>
        </div>
        <div class="pw_footer">
          <button
            class="btn save_btn"
            v-if="!isShowCheck"
            @click="handlePopClick()"
          >
            {{currentPopBtnText}}
          </button>
          <button class="btn cancel_btn" @click="handlePageCancel()">
            取消
          </button>
        </div>
      </div>
    </div>
    <script src="./college_info.js"></script>
    <script src="./vue.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
